<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- <link rel="stylesheet" href="./bootstrap.css"> -->
      <link rel="stylesheet" href="../css/index.css">
      <style>
            body{
                  background: url(../../static/img/passport-banner.jpg);
            }
            .container{
                  width: 302px;
                  height: 350px;
                  border: 1px solid #E9E9E9;
                  float: right;
                  margin-right: 100px;
                  margin-top: 100px;
                  position: relative;
                 border-radius: 10px;
            }
            .container h2{
                  color: #482618;
                  font-size: 15px;
                  text-align: center;
                  line-height: 30px;
            }
            .form-group input{
                  width: 270px;
                  height: 38px;
                  margin-left: 10px;
                  margin-top: 20px;
                  border: 1px solid #fff;
            }
            #btn{
                  display: block;
                  background: #442818;
                  border-radius: 2px;
                  height: 48px;
                  width: 270px;
                  line-height: 48px;
                  text-align: center;
                  font-size: 18px;
                  color: #fff;
                  border: 0;
                  cursor: pointer;
                  color: #fff;
                  position: absolute;
                  bottom: 8px;
                  left: 10px;
            }


      </style>
       <div class="header">
            <div class="header-logo">
                <img src="https://oss.51cocoa.com/themes/site/img/logo.png" alt="">
            </div>
            <ul class="nav-box">
                <a href="index.html">首页</a>
                <a href="cake.html">蛋糕</a>
                <a href="cake.html">面包</a>
                <a href="cake.html">冰淇淋</a>
                <a href="cake.html">冻与焗/轻蛋糕</a>
                <a href="cake.html">2小时急达送</a>
            </ul>
            <div class="right-user">
                <a class="username"></a>
                <a href="loginin.html">登录</a>
                <a href="register.html">注册</a>
                <a href="cart.html">购物车</a>
            </div>
        </div>
      <div class="container">
            <form action="javascript:void(0)" class="form-horizontal col-md-4 col-md-offset-4">
                  <h2 class="form-signin-heading">用户注册</h2>
                  <div class="form-group">
                        <input type="text" class="form-control" id="username" placeholder="输入用户名"   autocomplete="off">
                  </div>
                  <div class="form-group">
                        <input type="text" class="form-control" id="password" placeholder="密码：请输入8～20字符，需同时包含英文和数字" autocomplete="off">
                  </div>
                  <div class="form-group">
                        <input type="text" class="form-control" id="rpassword" placeholder="确认密码" autocomplete="off">
                  </div>
                  <div class="form-group">
                        <input type="text" class="form-control" id="nickname" placeholder="用户昵称" autocomplete="off">
                  </div>
             <button id="btn" class="btn btn-primary btn-sm" >注册</button>
            </form>
      </div>
</head>
<body>
      <script>
            //业务
            //1.点击按钮发送请求
            //发送请求的方式
            //1.xhr发送请求
            //2.fetch发送请求
            //2.接受后端返回的注册响应
            //3.根据响应去显示对应的内容
            var btn = document.getElementById("btn")
            var username = document.getElementById("username")
            var password = document.getElementById("password")
            var rpassword = document.getElementById("rpassword")
            var nickname = document.getElementById("nickname")
            btn.onclick = async function(){
                  //发起请求先明确几件事情
                  //1.请求路径
                  //2.请求方式
                  //3.请求参数
            let url = "http://127.0.0.1:8888/users/register"
            let options = {
                  method:"POST",
                  headers:{
                        "Content-Type":"application/x-www-form-urlencoded"
                  },body:`username=${username.value}&password=${password.value}&rpassword=${rpassword.value}&nickname=${nickname.value}`

                 
            };
            let response = await fetch(url,options);
            let data = await response.json();
            console.log(data);
            //注册结束之后我们应该跳转到登录页面 
            if(data.code ===1){
                  alert("注册成功，马上为您跳转到登录页面");
                  setTimeout(() => {
                        location.href = "loginin.html"
                        
                  }, 2000);
                 
            }else{
                  alert(data.message)
            }

            }



      </script>
</body>
</html>